<template>
    <div class="main-page">
        <el-form :model="childForm" :rule="rules" label-width="70px" ref="addForm"
                 size="mini">
            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="姓名">
                        <el-input size="mini" class="search-input" v-model="childForm.name"
                                  placeholder="请填写姓名"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="手机号码">
                        <el-input size="mini" class="search-input" v-model="childForm.mobile"
                                  placeholder="请填写电话"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                    </el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="checkRules" @change="handleCheckedRulesChange">
                        <el-checkbox v-for="rule in ruleListGlobal" :label="rule.id" :key="rule.id">{{rule.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>

    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../../components/headTop'
    import {userList} from '@/api/getData'
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";
    export default {
        name: 'addStaff',
        props: {},
        data() {
            return {
                opertype:'',
            rules: {
                    name: [
                        {required: true, message: '', trigger: 'blur'},
                    ]

                },
                isIndeterminate:true,
                checkAll: false,
                checkRules: [],
                childForm: {name:'',mobile:''}
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,

        },
        computed: {
            ...mapGetters(['userInfo','ruleListGlobal'])
        },
        created() {
        },
        mounted() {

        },
        methods: {
            ...mapActions(['']),
            handleCheckedRulesChange:function(val){


            },
            validForm(){
                let flag = false
                this.$refs['addForm'].validate((valid) => {
                    flag = valid
                })
                return flag;

            },
            handleCheckAllChange:function(val){
                if(val===true){
                    var temp=[];
                    this.ruleListGlobal.forEach((item)=>{
                        temp.push(item.id)
                    });
                    this.checkRules=temp;
                }
                else{
                    this.checkRules=[];
                }
                this.isIndeterminate = false;

            },
             validFrom(){
                let flag = false
                this.$refs['addForm'].validate((valid) => {
                    flag = valid
                })
                return flag;

            }
        },
    }
</script>
<style lang="less">
    @import '../../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }
</style>
